<template>
  <view class="box">
    <!-- ------------------------ 车型名称-开始 ------------------------ -->
    <view class="title">{{ carDetailInfo.vem_name }}</view>
    <view class="sectCarModel">
      <view class="left_box" :class="{ 'height-box': isMultipleCar }" @click="clickPick(infoRigth.ves_id, false)">
        <view class="car_title">
          <view>{{ infoLeft.ves_name }}</view>
        </view>
        <view class="car_move" v-if="isMultipleCar">点击更换车型</view>
      </view>
      <view class="right_box" @click="clickPick(infoLeft.ves_id, true)" v-if="isMultipleCar">
        <view class="car_title">
          <view>{{ infoRigth.ves_name }} </view>
        </view>
        <view class="car_move">点击更换车型</view>
      </view>
    </view>
    <!-- ------------------------ 车型价格-开始 ------------------------ -->
    <view class="title">市场指导价格</view>
    <view class="card">
      <view class="item_box">
        <view :class="['item', 'item-l', isMultipleCar ? 'multi-car-w' : '']">市场指导价格</view>
        <view class="item " :class="{ 'multi-car-w': isMultipleCar }">{{ infoLeft.price_range | moneyShow }}元</view>
        <view class="item" v-if="isMultipleCar">{{ infoRigth.price_range | moneyShow }}元</view>
      </view>
    </view>
    <!-- ------------------------ 车型参数-开始 ------------------------ -->
    <view v-for="item in carHasParaList" :key="item.propt_id">
      <!-- ---------- 规格参数 ---------- -->
      <template v-if="item.prop_name === '规格参数'">
        <view class="title">规格参数</view>
        <view class="card">
          <view class="param_list" :key="item2.propt_id" v-for="(item2, i) in filterParam(item.propt_id)">
            <view class="img-item" :class="{ 'multi-car-img': isMultipleCar }">
              <image class="img" mode="aspectFit" :src="`${baseUrl}${item2.prop_valCtt}`"></image>
            </view>
            <view class="img-item" v-if="isMultipleCar" :class="{ 'multi-car-img': isMultipleCar }">
              <image class="img" mode="aspectFit" :src="`${baseUrl}${rightParam(item.propt_id, i)}`"></image>
            </view>
          </view>
        </view>
      </template>
      <!-- ---------- 其它参数 ---------- -->
      <template v-else>
        <view class="title">{{ item.prop_name }}</view>
        <view class="card">
          <view class="param_list" :key="item2.propt_id" v-for="(item2, i) in filterParam(item.propt_id)">
            <!-- 参数名列 -->
            <text class="param left" :class="{ 'item-width': isMultipleCar }">
              {{ item2.prop_name }}
            </text>
            <text class="param center" :class="{ 'item-width': isMultipleCar }">
              {{ item2.prop_valCtt }}
            </text>
            <text class="param rigth" v-if="isMultipleCar">
              {{ rightParam(item.propt_id, i) }}
            </text>
          </view>
        </view>
      </template>
    </view>
    <!-- ------------------------ 车型选择-开始 ------------------------ -->
    <view style="height: 60rpx"></view>
    <u-picker :show="show" :immediateChange="true" keyName="ves_name" :columns="sectParam" closeOnClickOverlay
      @cancel="show = false" confirmColor="#de4141" @confirm="bindPickerChange"></u-picker>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CatModelContrast',
  data() {
    return {
      index: 0,
      leftV: [],
      rightV: [],
      show: false,
      isRigth: true,
      sectParam: [],
      infoLeft: {},
      infoRigth: {},
      baseUrl: `${this.$baseUrl}/images/ZEEKR/car/`,
    }
  },
  computed: {
    ...mapState([
      'veStyle',
      'carParaList',
      'carsParamAll',
      'carDetailInfo',
    ]),
    // ------------------------ 是否只有一辆车-开始 ------------------------
    isMultipleCar() {
      return Object.keys(this.carsParamAll).length > 1
    },
    // 参数小类的id
    leftProptParentId() {
      let arr = this.leftV.map(item => item.propt_parent_id)
      return [...new Set(arr)];
    },
    // 参数大类，设了参数小类的
    carHasParaList() {
      return this.carParaList.filter(item => this.leftProptParentId.includes(item.propt_id))
    }
  },
  methods: {
    bindPickerChange(e) {
      this.show = false
      let temp = e.value[0]
      if (this.isRigth) {
        this.infoRigth = temp
        this.rightV = this.carsParamAll[temp.index]
      } else {
        this.infoLeft = temp
        this.leftV = this.carsParamAll[temp.index]
      }
    },
    // 弹起窗，并计算可选的数据
    clickPick(e, flag) {
      this.isRigth = flag
      let cartArr = this.veStyle
      this.sectParam[0] = cartArr.filter((item, index) => {
        item.index = index
        if (item.ves_id !== e) {
          return true
        }
      })
      this.show = true
    },
    // 集团品牌车型(参数详情)
    handleParam() {
      // 所有车型的参数
      let temp = this.carsParamAll
      // 左
      this.leftV = temp[0]
      // 右
      this.rightV = temp?.[1] || []
    },
    filterParam(e) {
      let temp = this.leftV
      return temp.filter((item) => item.propt_parent_id == e) || []
    },
    rightParam(e, i) {
      let temp = this.rightV
      let temp2 = temp.filter((item) => item.propt_parent_id == e) || []
      return temp2[i]?.prop_valCtt
    },
  },
  onLoad(option) {
    let veStyle = this.veStyle
    this.infoLeft = veStyle?.[0]
    this.infoRigth = veStyle?.[1]
    this.handleParam()
    let { vemId, vemVid } = option
    this.shareMixin.path = `/CarModel/CarDetail`
    this.shareMixin.query = `vemVid=${vemVid}&vemId=${vemId}`
    this.shareMixin.title = `${this.carDetailInfo.vem_name}详情`
  },
}
</script>

<style scoped lang="scss">
$bothEndsMar: 0 30rpx;

.title {
  line-height: 60rpx;
  font-size: 34rpx;
  margin: 30rpx 20rpx 10rpx 20rpx;
  font-weight: 600;
}

.card {
  margin: $bothEndsMar;
  padding: 20rpx;
  box-shadow: 0px 0px 10px 0px rgba(5, 5, 5, 0.16);

  .item_box {
    display: flex;

    .item {
      width: 50%;
      text-align: center;

    }

    .multi-car-w {
      width: 33.33%;
      text-align: center;
      // width: 50%;
      // height: 45vw;
    }

    .item-l {
      text-align: left;
    }
  }

  .img-item {
    width: 100%;
    // height: 70vw;

    .img {
      width: 100%;
      // height: 100%;
    }
  }

  .multi-car-img {
    width: 50%;
    height: 45vw;
  }
}

.sectCarModel {
  display: flex;
  justify-content: space-between;
  margin: $bothEndsMar;
  margin-bottom: 40rpx;

  .left_box,
  .right_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    padding: 30rpx;
    background-color: #eee;
    flex-shrink: 0;

    .car_title {
      font-size: 28rpx;
      font-weight: 600;
      color: #222;
    }

    .car_move {
      margin-left: 100rpx;
      font-size: 27rpx;
      font-weight: 400;
      color: #666;
      border-bottom: 1px solid #999;
    }
  }

  .height-box {
    width: 330rpx;
    height: 220rpx;
  }

  .right_box {
    width: 330rpx;
    height: 220rpx;
  }
}

.param_list {
  margin: 26rpx 0rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  .param {
    color: #333;
    font-weight: 500;
    font-size: 28rpx;
    align-items: center;
    font-weight: 100;
    text-overflow: ellipsis;
    word-wrap: break-word;
    // line-height: 60rpx;
  }

  &.bordTop {
    border-top: 1px solid #eee;
  }

  .left {
    width: 50%;
    // width: 33.33%;
    text-align: left;
  }

  .center {
    width: 50%;
    // width: 33.33%;
    text-align: center;
    padding-left: 10rpx;
  }

  .rigth {
    width: 33.33%;
    text-align: right;
    padding-left: 10rpx;
  }

  .item-width {
    width: 33.33%;
    text-align: right;
    font-weight: 500;
    font-family: "Microsoft JhengHei";
  }
}
</style>
